{% extends "base.html" %}

{% block title %}管理后台 - 风之宿{% endblock %}

{% block content %}
<div class="container mx-auto px-3 sm:px-4 py-6 sm:py-8">
  <!-- 页面标题和移动端菜单 -->
  <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center mb-6 sm:mb-8 gap-4">
    <h1 class="text-2xl sm:text-3xl font-bold text-primary">管理后台</h1>

    <!-- 移动端快捷操作下拉菜单 -->
    <div class="sm:hidden w-full">
      <select onchange="if(this.value) window.location.href=this.value"
              class="w-full px-3 py-2 border border-gray-300 rounded-md bg-white text-gray-700 focus:outline-none focus:ring-2 focus:ring-primary focus:border-primary">
        <option value="">快速操作...</option>
        <option value="{% url 'hotel_admin:manage_rooms' %}">管理房间</option>
        <option value="{% url 'hotel_admin:manage_bookings' %}">管理预订</option>
        <option value="{% url 'hotel_admin:manage_feedbacks' %}">问题反馈</option>
        <option value="{% url 'hotel_admin:manage_bills' %}">账单管理</option>
        {% if request.session.username == 'hyadmin' %}
        <option value="{% url 'hotel_admin:reports' %}">数据报表</option>
        <!-- 修正端点名称 -->
        <option value="{% url 'hotel_admin:system_operations' %}">系统运维</option>
        {% endif %}
      </select>
    </div>
  </div>

  <!-- 统计卡片 -->
  <div class="grid grid-cols-2 lg:grid-cols-4 gap-3 sm:gap-4 lg:gap-6 mb-6 sm:mb-8">
    <!-- 总用户数 -->
    <div class="bg-white rounded-lg shadow-sm sm:shadow-md p-3 sm:p-4 lg:p-6 border border-gray-100 hover:shadow-md transition-shadow">
      <div class="flex items-center">
        <div class="p-2 sm:p-3 rounded-full bg-blue-50 text-blue-600 flex-shrink-0">
          <i class="fa fa-users text-lg sm:text-xl"></i>
        </div>
        <div class="ml-3 sm:ml-4 overflow-hidden">
          <p class="text-xs sm:text-sm font-medium text-gray-600 truncate">总用户数</p>
          <h3 class="text-xl sm:text-2xl font-bold text-gray-900">{{ total_users }}</h3>
        </div>
      </div>
      <div class="mt-2 sm:mt-3 pt-2 sm:pt-3 border-t border-gray-100">
        <p class="text-xs text-gray-500 flex items-center">
          <i class="fa fa-arrow-up text-green-500 mr-1"></i>
          <span class="truncate">本月新增用户</span>
        </p>
      </div>
    </div>

    <!-- 总房间数 -->
    <div class="bg-white rounded-lg shadow-sm sm:shadow-md p-3 sm:p-4 lg:p-6 border border-gray-100 hover:shadow-md transition-shadow">
      <div class="flex items-center">
        <div class="p-2 sm:p-3 rounded-full bg-green-50 text-green-600 flex-shrink-0">
          <i class="fa fa-bed text-lg sm:text-xl"></i>
        </div>
        <div class="ml-3 sm:ml-4 overflow-hidden">
          <p class="text-xs sm:text-sm font-medium text-gray-600 truncate">总房间数</p>
          <h3 class="text-xl sm:text-2xl font-bold text-gray-900">{{ total_rooms }}</h3>
        </div>
      </div>
      <div class="mt-2 sm:mt-3 pt-2 sm:pt-3 border-t border-gray-100">
        <p class="text-xs text-gray-500 truncate">
          <span class="text-green-600 font-medium">{% if total_rooms > 2 %}{{ total_rooms|add:-2 }}{% else %}{{ total_rooms }}{% endif %}</span> 间可预订
        </p>
      </div>
    </div>

    <!-- 活跃预订 -->
    <div class="bg-white rounded-lg shadow-sm sm:shadow-md p-3 sm:p-4 lg:p-6 border border-gray-100 hover:shadow-md transition-shadow">
      <div class="flex items-center">
        <div class="p-2 sm:p-3 rounded-full bg-yellow-50 text-yellow-600 flex-shrink-0">
          <i class="fa fa-calendar-check-o text-lg sm:text-xl"></i>
        </div>
        <div class="ml-3 sm:ml-4 overflow-hidden">
          <p class="text-xs sm:text-sm font-medium text-gray-600 truncate">活跃预订</p>
          <h3 class="text-xl sm:text-2xl font-bold text-gray-900">{{ active_bookings }}</h3>
        </div>
      </div>
      <div class="mt-2 sm:mt-3 pt-2 sm:pt-3 border-t border-gray-100">
        <p class="text-xs text-gray-500 truncate">今日入住: <span class="font-medium">2</span></p>
      </div>
    </div>

    <!-- 待处理反馈 -->
    <div class="bg-white rounded-lg shadow-sm sm:shadow-md p-3 sm:p-4 lg:p-6 border border-gray-100 hover:shadow-md transition-shadow">
      <div class="flex items-center">
        <div class="p-2 sm:p-3 rounded-full bg-red-50 text-red-600 flex-shrink-0">
          <i class="fa fa-exclamation-circle text-lg sm:text-xl"></i>
        </div>
        <div class="ml-3 sm:ml-4 overflow-hidden">
          <p class="text-xs sm:text-sm font-medium text-gray-600 truncate">待处理反馈</p>
          <h3 class="text-xl sm:text-2xl font-bold text-gray-900">{{ pending_feedbacks }}</h3>
        </div>
      </div>
      <div class="mt-2 sm:mt-3 pt-2 sm:pt-3 border-t border-gray-100">
        <p class="text-xs text-gray-500 truncate">
          {% if pending_feedbacks > 0 %}
          <span class="text-red-600 font-medium">需要关注</span>
          {% else %}
          <span class="text-green-600">全部处理完成</span>
          {% endif %}
        </p>
      </div>
    </div>
  </div>

  <!-- 快速操作 - 桌面端 -->
  <div class="hidden sm:block bg-white rounded-lg shadow-md p-4 lg:p-6 mb-6 sm:mb-8">
    <h2 class="text-xl sm:text-2xl font-semibold text-primary mb-4">快速操作</h2>
    <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-3 sm:gap-4">
      <a href="{% url 'hotel_admin:manage_rooms' %}"
         class="group bg-primary text-white py-3 px-3 sm:px-4 rounded-lg hover:bg-primary/90 transition-all duration-200 text-center shadow-sm hover:shadow-md">
        <i class="fa fa-bed text-lg sm:text-xl mb-1 sm:mb-2 block group-hover:scale-110 transition-transform"></i>
        <p class="text-xs sm:text-sm font-medium truncate">管理房间</p>
      </a>

      <a href="{% url 'hotel_admin:manage_bookings' %}"
         class="group bg-accent text-white py-3 px-3 sm:px-4 rounded-lg hover:bg-accent/90 transition-all duration-200 text-center shadow-sm hover:shadow-md">
        <i class="fa fa-calendar text-lg sm:text-xl mb-1 sm:mb-2 block group-hover:scale-110 transition-transform"></i>
        <p class="text-xs sm:text-sm font-medium truncate">管理预订</p>
      </a>

      <a href="{% url 'hotel_admin:manage_feedbacks' %}"
         class="group bg-green-600 text-white py-3 px-3 sm:px-4 rounded-lg hover:bg-green-700 transition-all duration-200 text-center shadow-sm hover:shadow-md">
        <i class="fa fa-comments text-lg sm:text-xl mb-1 sm:mb-2 block group-hover:scale-110 transition-transform"></i>
        <p class="text-xs sm:text-sm font-medium truncate">问题反馈</p>
      </a>

      <a href="{% url 'hotel_admin:manage_bills' %}"
         class="group bg-orange-600 text-white py-3 px-3 sm:px-4 rounded-lg hover:bg-orange-700 transition-all duration-200 text-center shadow-sm hover:shadow-md">
        <i class="fa fa-credit-card text-lg sm:text-xl mb-1 sm:mb-2 block group-hover:scale-110 transition-transform"></i>
        <p class="text-xs sm:text-sm font-medium truncate">账单管理</p>
      </a>

      {% if request.session.username == 'hyadmin' %}
      <a href="{% url 'hotel_admin:reports' %}"
         class="group bg-purple-600 text-white py-3 px-3 sm:px-4 rounded-lg hover:bg-purple-700 transition-all duration-200 text-center shadow-sm hover:shadow-md">
        <i class="fa fa-bar-chart text-lg sm:text-xl mb-1 sm:mb-2 block group-hover:scale-110 transition-transform"></i>
        <p class="text-xs sm:text-sm font-medium truncate">数据报表</p>
      </a>

      <!-- 修正端点名称 -->
      <a href="{% url 'hotel_admin:system_operations' %}"
         class="group bg-gray-800 text-white py-3 px-3 sm:px-4 rounded-lg hover:bg-gray-900 transition-all duration-200 text-center shadow-sm hover:shadow-md">
        <i class="fa fa-cogs text-lg sm:text-xl mb-1 sm:mb-2 block group-hover:scale-110 transition-transform"></i>
        <p class="text-xs sm:text-sm font-medium truncate">系统运维</p>
      </a>
      {% endif %}
    </div>
  </div>

  <!-- 最近活动和统计概览 -->
  <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 sm:gap-8">
    <!-- 最近预订 -->
    <div class="lg:col-span-2 bg-white rounded-lg shadow-md p-4 sm:p-6">
      <div class="flex justify-between items-center mb-4">
        <h2 class="text-xl sm:text-2xl font-semibold text-primary">最近预订</h2>
        <a href="{% url 'hotel_admin:manage_bookings' %}"
           class="text-xs sm:text-sm text-primary hover:text-primary/80 font-medium flex items-center">
          查看全部
          <i class="fa fa-arrow-right ml-1 text-xs"></i>
        </a>
      </div>

      {% if recent_bookings %}
        <div class="overflow-x-auto -mx-2 sm:mx-0">
          <table class="min-w-full divide-y divide-gray-200 text-sm sm:text-base">
            <thead class="bg-gray-50">
              <tr>
                <th class="px-2 sm:px-4 py-2 sm:py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider whitespace-nowrap">用户</th>
                <th class="px-2 sm:px-4 py-2 sm:py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider whitespace-nowrap hidden sm:table-cell">房间</th>
                <th class="px-2 sm:px-4 py-2 sm:py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider whitespace-nowrap">入住</th>
                <th class="px-2 sm:px-4 py-2 sm:py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider whitespace-nowrap hidden md:table-cell">状态</th>
                <th class="px-2 sm:px-4 py-2 sm:py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider whitespace-nowrap">操作</th>
              </tr>
            </thead>
            <tbody class="bg-white divide-y divide-gray-200">
              {% for booking in recent_bookings %}
              <tr class="hover:bg-gray-50 transition-colors">
                <td class="px-2 sm:px-4 py-2 sm:py-3 whitespace-nowrap">
                  <div class="flex items-center">
                    <div class="w-6 h-6 bg-primary rounded-full flex items-center justify-center text-white text-xs font-bold mr-2">
                      {{ booking.username|first|upper }}
                    </div>
                    <span class="text-xs sm:text-sm font-medium text-gray-900 truncate max-w-[80px] sm:max-w-none">{{ booking.username }}</span>
                  </div>
                </td>
                <td class="px-2 sm:px-4 py-2 sm:py-3 whitespace-nowrap text-gray-500 text-xs sm:text-sm hidden sm:table-cell">
                  {{ booking.room_name }}
                </td>
                <td class="px-2 sm:px-4 py-2 sm:py-3 whitespace-nowrap text-gray-900 text-xs sm:text-sm">
                  {{ booking.check_in }}
                </td>
                <td class="px-2 sm:px-4 py-2 sm:py-3 whitespace-nowrap hidden md:table-cell">
                  <span class="px-2 py-1 inline-flex text-xs leading-4 font-semibold rounded-full
                    {% if booking.status == 'confirmed' %}bg-green-100 text-green-800
                    {% elif booking.status == 'pending' %}bg-yellow-100 text-yellow-800
                    {% elif booking.status == 'cancelled' %}bg-red-100 text-red-800
                    {% elif booking.status == 'checked_in' %}bg-blue-100 text-blue-800
                    {% else %}bg-gray-100 text-gray-800{% endif %}">
                    {{ booking.status }}
                  </span>
                </td>
                <td class="px-2 sm:px-4 py-2 sm:py-3 whitespace-nowrap text-xs sm:text-sm font-medium">
                  <a href="{% url 'hotel_admin:manage_bookings' %}" class="text-primary hover:text-primary/80">查看</a>
                </td>
              </tr>
              {% endfor %}
            </tbody>
          </table>
        </div>
      {% else %}
        <div class="text-center py-8">
          <i class="fa fa-calendar-times-o text-4xl text-gray-300 mb-3"></i>
          <p class="text-gray-500 text-sm">暂无预订记录</p>
        </div>
      {% endif %}
    </div>

    <!-- 右侧边栏 - 系统状态和快捷操作 -->
    <div class="space-y-6 sm:space-y-8">
      <!-- 系统状态 -->
      <div class="bg-white rounded-lg shadow-md p-4 sm:p-6">
        <h3 class="text-lg sm:text-xl font-semibold text-primary mb-4">系统状态</h3>
        <div class="space-y-3">
          <div class="flex justify-between items-center">
            <span class="text-sm text-gray-600">服务器状态</span>
            <span class="flex items-center text-green-600 text-sm">
              <i class="fa fa-circle text-xs mr-1"></i>
              正常运行
            </span>
          </div>
          <div class="flex justify-between items-center">
            <span class="text-sm text-gray-600">数据库连接</span>
            <span class="flex items-center text-green-600 text-sm">
              <i class="fa fa-circle text-xs mr-1"></i>
              正常
            </span>
          </div>
          <div class="flex justify-between items-center">
            <span class="text-sm text-gray-600">最后备份</span>
            <span class="text-sm text-gray-900">{% now "Y-m-d H:i:s" %}</span>
          </div>
          <div class="flex justify-between items-center">
            <span class="text-sm text-gray-600">系统版本</span>
            <span class="text-sm text-gray-900">v2.1.0</span>
          </div>
        </div>
      </div>

      <!-- 今日概览 -->
      <div class="bg-white rounded-lg shadow-md p-4 sm:p-6">
        <h3 class="text-lg sm:text-xl font-semibold text-primary mb-4">今日概览</h3>
        <div class="space-y-3">
          <div class="flex justify-between items-center">
            <span class="text-sm text-gray-600">新预订</span>
            <span class="text-sm font-medium text-gray-900">3</span>
          </div>
          <div class="flex justify-between items-center">
            <span class="text-sm text-gray-600">今日入住</span>
            <span class="text-sm font-medium text-gray-900">2</span>
          </div>
          <div class="flex justify-between items-center">
            <span class="text-sm text-gray-600">今日退房</span>
            <span class="text-sm font-medium text-gray-900">1</span>
          </div>
          <div class="flex justify-between items-center">
            <span class="text-sm text-gray-600">新反馈</span>
            <span class="text-sm font-medium text-gray-900">2</span>
          </div>
        </div>
      </div>

      <!-- 移动端额外快捷操作 -->
      <div class="sm:hidden bg-white rounded-lg shadow-md p-4">
        <h3 class="text-lg font-semibold text-primary mb-3">更多操作</h3>
        <div class="grid grid-cols-2 gap-2">
          <a href="{% url 'hotel_admin:manage_bills' %}"
             class="bg-gray-100 text-gray-700 py-2 px-3 rounded text-center text-xs hover:bg-gray-200 transition-colors">
            <i class="fa fa-credit-card mb-1 block"></i>
            账单
          </a>
          {% if request.session.username == 'hyadmin' %}
          <a href="{% url 'hotel_admin:reports' %}"
             class="bg-purple-100 text-purple-700 py-2 px-3 rounded text-center text-xs hover:bg-purple-200 transition-colors">
            <i class="fa fa-bar-chart mb-1 block"></i>
            报表
          </a>
          <!-- 修正端点名称 -->
          <a href="{% url 'hotel_admin:system_operations' %}"
             class="bg-gray-800 text-white py-2 px-3 rounded text-center text-xs hover:bg-gray-700 transition-colors">
            <i class="fa fa-cogs mb-1 block"></i>
            运维
          </a>
          {% endif %}
        </div>
      </div>
    </div>
  </div>
</div>

<!-- 移动端底部导航 -->
<div class="sm:hidden fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 py-2 px-4 z-40">
  <div class="flex justify-around items-center">
    <a href="{% url 'hotel_admin:dashboard' %}"
       class="flex flex-col items-center text-primary">
      <i class="fa fa-dashboard text-lg"></i>
      <span class="text-xs mt-1">首页</span>
    </a>
    <a href="{% url 'hotel_admin:manage_bookings' %}"
       class="flex flex-col items-center text-gray-500 hover:text-primary">
      <i class="fa fa-calendar text-lg"></i>
      <span class="text-xs mt-1">预订</span>
    </a>
    <a href="{% url 'hotel_admin:manage_rooms' %}"
       class="flex flex-col items-center text-gray-500 hover:text-primary">
      <i class="fa fa-bed text-lg"></i>
      <span class="text-xs mt-1">房间</span>
    </a>
    <a href="{% url 'hotel_admin:manage_feedbacks' %}"
       class="flex flex-col items-center text-gray-500 hover:text-primary">
      <i class="fa fa-comments text-lg"></i>
      <span class="text-xs mt-1">反馈</span>
    </a>
    {% if request.session.username == 'hyadmin' %}
    <!-- 修正端点名称 -->
    <a href="{% url 'hotel_admin:system_operations' %}"
       class="flex flex-col items-center text-gray-500 hover:text-primary">
      <i class="fa fa-cogs text-lg"></i>
      <span class="text-xs mt-1">运维</span>
    </a>
    {% endif %}
  </div>
</div>

<!-- 为移动端底部导航留出空间 -->
<div class="sm:hidden h-16"></div>

<style>
/* 自定义滚动条样式 */
.overflow-x-auto::-webkit-scrollbar {
  height: 4px;
}
.overflow-x-auto::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 2px;
}
.overflow-x-auto::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 2px;
}
.overflow-x-auto::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}

/* 移动端表格响应式 */
@media (max-width: 640px) {
  .overflow-x-auto {
    -webkit-overflow-scrolling: touch;
  }
}
</style>
{% endblock %}
